<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit :isheader="isheader">
        <div slot="toolheader" border="false" foldbtn='false'>
          <div class="table-operator">
            <a-button  type="primary" icon="plus" @click="addInst">{{i18n('list.addInst','加入机构')}}</a-button>
          </div>
          <span class="search-btn-box"  v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
        </div>
        <div  btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
                <a-form-item :label="i18n('form.nameCn','公司中文名')">
                  <a-input :placeholder="i18n('form.nameCn','公司中文名','input')" v-model="queryParam.Q_NAME_CN__S_LK" />
                </a-form-item>
              </a-col>
              <a-col :span="colSpan">
                <a-form-item :label="i18n('form.domain','公司域名')">
                  <a-input :placeholder="i18n('form.domain','公司域名','input')" v-model="queryParam.Q_DOMAIN__S_LK" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <rx-grid
          ref="table"
          :bordered="isBorder"
          :multiSelect="true"
          :columns="columns"
          :defaultPageSize="10"
          url="/api-user/user/org/osInst/applyListData"
          :queryParam="queryParam"
          data-field="result.data"
          :pageSizeOptions="['10','30','40']"
          id-field="instId"
          @selectChange="onSelectChange"
        >
          <span slot="status" slot-scope="{ text }">
            <a-tag :color="statusMap[text].color">
              <span>{{ statusMap[text].text }}</span>
            </a-tag>
          </span>
          <span slot="moreInstStatus" slot-scope="{ text }">
            <a-tag :color="moreInstStatusMap[text].color">
              <span>{{ moreInstStatusMap[text].text }}</span>
            </a-tag>
          </span>
          <span slot="action" slot-scope="{ text, record }" class="actionIcons">
            <span v-if="!record.present && record.moreInstStatus=='APPLY'"  @click.stop="cancelApply(record)" :title="i18n('list.cancelApply','取消申请')">{{i18n('list.cancelApply','取消申请')}}</span>
          </span>
        </rx-grid>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import OsInstApi from '@/api/user/org/osInst'
  import { BaseList, RxLayout,RxGrid,RxFit,Util } from "@lowcode/jpaas-common-lib"
  import OsInstJoinInstEdit from "./OsInstJoinInstEdit";
  export default {
    name: 'OsInstShowCanApplyList',
    components: {
      RxLayout,
      RxGrid,
      RxFit
    },
    mixins: [BaseList],
    data() {
      return {
        // 表头
        columns: [
          {
            title: this.i18n('form.nameCn','机构中文名'),
            dataIndex: 'nameCn',
            width:130
          },
          {
            title: this.i18n('form.domain','机构域名'),
            dataIndex: 'domain',
            width:120
          },
          {
            title: this.i18n('form.status','状态'),
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' },
            width:120
          },
          {
            title: this.i18n('form.joinOrNot','是否加入'),
            dataIndex: 'moreInstStatus',
            scopedSlots: { customRender: 'moreInstStatus' },
            width:120
          },
          {
            title: this.i18n('form.remarks','备注'),
            dataIndex: 'moreInstNote',
            width:120
          },
          {
            title: this.$ti18('rxList.action','操作'),
            width:120,
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          },
        ],
        moreInstStatusMap: {
          ENABLED: { color: 'green', text: this.i18n('joinMap.inUse','在用') },
          APPLY:   { color: 'blue', text: this.i18n('joinMap.processing','申请处理中')},
          REFUSE:  { color: 'red', text: this.i18n('joinMap.refused','已拒绝')},
          DISABLED: { color: 'red', text: this.i18n('joinMap.disabled','已禁用')}
        },
        statusMap: {
          ENABLED: { color: 'green', text: this.i18n('statusMap.enable','启用') },
          DISABLED: { color: 'red', text: this.i18n('statusMap.disable','禁用') },
          INIT: { color: 'orange', text: this.i18n('statusMap.init','初始化') },
        }
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"OsInstShowCanApply",key);
      },
      //一开始调用数据
      getListByParams(parameter) {
        return OsInstApi.query(parameter)
      },
      search(){
        this.$refs.table.loadData();
      },
      cancel(){
        this.resetSearch();
      },
      closeSearchbar(){
        //关闭过滤弹窗；（点击X触发）
        this.fitSearch = false ;
      },
      addInst(){
        var self=this;
        var conf= {
          curVm:this,
          shade:false,
          widthHeight:['800px', '600px'],
          component:OsInstJoinInstEdit,
          title:this.i18n('list.addInstTitle','选择加入的机构')
        };
        Util.open(conf,function(action){
          self.refreshGrid();
        });
      },
      cancelApply(record){
        this.quitOrCancel(record,'cancel');
      },
      quitApply(record){
        this.quitOrCancel(record,'quit');
      },
      quitOrCancel(record,type){
        var self=this;
        this.$confirm({
          title: this.$ti18('rxMsa.actionTips','操作提示'),
          zIndex:20000,
            okText: this.$ti18('rxForm.ackBtn','确认'),
            cancelText: this.$ti18('rxForm.cancelBtn','取消'),
          content: type=='quit'?this.i18n('msa.exitOrg','退出所选机构'):this.i18n('msa.cancelTips','确定取消所选机构的申请？'),
          onOk() {
            OsInstApi.quitOrCancel(record.instId,record.moreInstStatus).then(res=>{
              if(type=='quit'){
                window.location.reload();
              }else {
                self.refreshGrid();
              }
            })
          },
          onCancel() {
          }
        })
      }
    }

  }
</script>
